<template>
  <div
    @mouseover="displayOff = true"
    @mouseleave="displayOff = false"
    class="bnt-wrapper">
    <button class="bnt" :class="bntClass">
      <span class="bnt-content">
        <slot name="avatar">
          <Avatar
            :size="32"
            src="/src/assets/icon/xiaoxi.png"
            state="OFFLINE" />
        </slot>
        <span class="bnt-text">
          <slot name="default"> 默认文本 </slot>
        </span>
      </span>
    </button>
    <button @click="close" class="close-button" v-show="displayOff">×</button>
    <n-badge :value="item.data.newMessagesCount" :max="99" color="red" />
  </div>
</template>

<script setup lang="ts">
import { computed, ref } from "vue";
import Avatar from "@/components/other/Avatar.vue";
import { PrivateMessageItem } from "@/store/modules/usePrivateMessageStore.ts";

const displayOff = ref(false);
const props = defineProps<{
  item: PrivateMessageItem;
  closeCallback: (item: PrivateMessageItem) => void;
}>();

function close(event: MouseEvent) {
  //   取消事件传递
  event.stopPropagation();
  props.closeCallback && props.closeCallback(props.item);
}

// 计算属性
const bntClass = computed(
  () =>
    `${props.item.selected ? "selected" : ""} ${displayOff.value ? "mouseover" : ""}`
);
</script>

<style scoped>
.bnt-wrapper {
  position: relative;
  margin: 0 10px;
}

.bnt {
  padding-top: 2px;
  border-radius: 10px;
  height: 50px;
  width: 100%;
  justify-content: flex-start;
}

.mouseover,
button:hover {
  background-color: #e3e3e3;
}

.selected,
.selected:hover,
button:active {
  background-color: white;
}

.bnt-content {
  display: flex;
  align-items: center;
  padding: 5px 20px;
}

.bnt-text {
  margin: 0 10px;
}

.close-button {
  position: absolute;
  top: 20px;
  right: 5px;
  line-height: 9px;
  height: 15px;
  width: 15px;
  padding: 3px;
  color: #999999;
  /*圆角*/
  border-radius: 15px;
}

.close-button:hover {
  background-color: #999;
  color: white;
}

.n-badge {
  position: absolute;
  top: -2px;
  right: -8px;
}
</style>
